<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>majiang</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <style>
        .map-wrap {
            width: 100%;
            height: 95vh;
            background-color: #EBEBEB;
            position: relative;
            display: flex;
        }

        .map-wrap #winchart {
            position: absolute;
            left: 0%;
            top: 0%;
            width: 40%;
            height: 50%;
        }
        .map-wrap #winner {
            position: absolute;
            left: 40%;
            top: 0%;
            width: 60%;
            height: 50%;
        }

        .map-wrap #winner_img {
            position: absolute;
            left: 62%;
            top: 2%;
            width: 10%;
            height: 20%;
        }

        .map-wrap #chart {
            position: absolute;
            left: 0%;
            top: 50%;
            width: 100%;
            height: 50%;
        }
    </style>
</head>

<body>
    <div class="map-wrap">
        <div id="winchart"></div>
        <div id="winner">
            <img src="0.png" alt="Description of the image" style="width: 90%; height: 90%;">
        </div>
        <div id="winner_img">
            <img src="ws.jpg" alt="Description of the image" style="width: 100%; height: 100%;">
        </div>
        <div id="chart"></div>
    </div>



    <script type="text/javascript">
        // Read the CSV file and store the table in the global variable
        function readCSVFile() {
            return d3.csv("./data.csv").then(function (data) {
                tableData = data.map(function (d) {
                    var date = d["date"];
                    var game = d["game"];
                    var ljh_score = d['ljh_score'];
                    var ljh_sum = d['ljh_sum'];
                    var gyw_score = d['gyw_score'];
                    var gyw_sum = d['gyw_sum'];
                    var wck_score = d['wck_score'];
                    var wck_sum = d['wck_sum'];
                    var ws_score = d['ws_score'];
                    var ws_sum = d['ws_sum'];
                    var ljh_win = d['ljh_win'];
                    var gyw_win = d['gyw_win'];
                    var wck_win = d['wck_win'];
                    var ws_win = d['ws_win'];


                    return {
                        date: date,
                        game: game,
                        ljh_score: ljh_score,
                        ljh_sum: ljh_sum,
                        gyw_score: gyw_score,
                        gyw_sum: gyw_sum,
                        wck_score: wck_score,
                        wck_sum: wck_sum,
                        ws_score: ws_score,
                        ws_sum: ws_sum,
                        ws_sum: ws_sum,
                        ljh_win: ljh_win,
                        gyw_win: gyw_win,
                        wck_win: wck_win,
                        ws_win: ws_win
                    };
                });
            });
        }
    </script>


    <script type="text/javascript">
        function show_chart() {
            var chartDom = document.getElementById('chart');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '总积分'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['gyw', 'ljh', 'wck', 'ws']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: tableData.map(function (d) {
                        return d.date;
                    }),
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'gyw',
                        type: 'line',
                        data: tableData.map(function (d) {
                            return d.gyw_sum;
                        })
                    },
                    {
                        name: 'ljh',
                        type: 'line',
                        data: tableData.map(function (d) {
                            return d.ljh_sum;
                        })
                    },
                    {
                        name: 'wck',
                        type: 'line',
                        data: tableData.map(function (d) {
                            return d.wck_sum;
                        })
                    },
                    {
                        name: 'ws',
                        type: 'line',
                        data: tableData.map(function (d) {
                            return d.ws_sum;
                        })
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    </script>

    <script type="text/javascript">
        function show_winchart() {
            var chartDom = document.getElementById('winchart');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '胜利场次分布'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '胜利场次',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: tableData.reduce(function (accumulator, currentValue) {
                                    return accumulator + parseInt(currentValue.gyw_win);
                                }, 0), name: 'gyw'
                            },
                            {
                                value: tableData.reduce(function (accumulator, currentValue) {
                                    return accumulator + parseInt(currentValue.ljh_win);
                                }, 0), name: 'ljh'
                            },
                            {
                                value: tableData.reduce(function (accumulator, currentValue) {
                                    return accumulator + parseInt(currentValue.wck_win);
                                }, 0), name: 'wck'
                            },
                            {
                                value: tableData.reduce(function (accumulator, currentValue) {
                                    return accumulator + parseInt(currentValue.ws_win);
                                }, 0), name: 'ws'
                            }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    </script>

    <script type="text/javascript">
        function show_all() {
            show_chart();
            show_winchart();
            console.log(tableData);
        }
    </script>



    <script type="text/javascript">
        var tableData;
        readCSVFile().then(show_all);
    </script>

</body>

</html>